<template >
  <div id="sort-activity">
    <c-title :hide="false"
             :text="acText"
             style=" position: relative; z-index: 9999;"></c-title>
    <div class="content">
      <div class="search_box">
        <ul class="search"
            :class="[!locStatus ? 'spaceAround': '']">
          <li class="left"
              @click="routerGo"
              v-if="locStatus">
            <!-- <i class="iconfont icon-service_n"></i> -->
            <span >{{city.substr(0, 2)||'选择城市'}}</span>
            <i class="iconfont icon-member-bottom"></i>
          </li>
          <li class="right" :class="[!locStatus ? 'all-width': '']">
            <i class="iconfont icon-a-icon_pressed"></i>
            <input type="text"
                   title="搜索"
                   v-model="value"
                   @click="search"
                   placeholder="搜索你喜欢的活动" />
          </li>
        </ul>
      </div>
      <div class="tab_box">
        <ul class="tab_list" v-if="categories.length > 0 && showTab">
          <van-tabs v-model="sortId"
                    @change="onClick"
                    title-active-color="#F15353"
                    title-inactive-color="#00001C"
                    sticky
                    :ellipsis="false"
                    id="tab"
                    line-width="20px"
                    color="#FE5E56">
            <van-tab title="全部"
                     :id="0"
                     name="0"
                     class="tabChild"
                     style="color: #666;"></van-tab>
            <van-tab :title="item.calssify_title"
                     v-for="(item,index) in categories"
                     :key="index"
                     :id="item.id"
                     :name="String(item.id)"
                     class="tabChild"
                     style="color: #666;"></van-tab>
          </van-tabs>
        </ul>
        <div class="opactiy" v-if="categories.length > 0 && showTab">
          <div class="box-show"></div>
          <i class="iconfont icon-icon_down1"
             @click="changeStatus"
             v-show="!status"></i>
          <i class="iconfont icon-icon_up1"
             @click="changeStatus"
             v-show="status"></i>
        </div>
      </div>
      <div class="sort-list"
           :class="[datas.length>0 ? 'padding': '']">
        <div class="pop"
             v-show="status">
          <ul>
            <li class="item"
                v-for="(item,index) in categories"
                :key="index"
                @click="setID(item)">{{item.calssify_title}}</li>
          </ul>
        </div>
        <van-pull-refresh v-model="isLoading" @refresh="loadTop" success-text="刷新成功">
          <div class="calssify-list"
               @click="toEnroll(list)"
               v-for="(list,index) in datas"
               :key="index">
            <div class="calssify-list-row">
              <div class="list-image">
                <img :src="list.thumb"
                    class="left">
                <span class="text default-end"
                  v-if="list.count_apply == list.limit && (list.registration_time<=now&&now<list.registration_end_time)">已报满</span>
                <template v-else>
                  <span class="text default-wait"
                      v-show="now<list.registration_time ">待开始</span>
                      <span class="text default"
                            v-show="list.registration_time<=now&&now<list.registration_end_time">报名中</span>
                      <span class="text default-end"
                            v-show="now>=list.registration_end_time">已结束</span>
                </template>

              </div>
              <div class="list-info">
                <p class="title">{{list.title}}</p>
                <p class="bottom-status"><span class="price"
                        v-if="list.cash>0.00"><b>{{$i18n.t('money')}}</b>{{list.cash}}</span><span class="cash"
                        v-if="list.cash<=0.00">免费</span></p>
                <p class="clock">{{timestampToTime(list.registration_time)}}开始</p>
              </div>
            </div>
            <div class="address"><i class="iconfont icon-zx_map_locate2"></i> {{list.city_name?list.city_name.substr(0,2):''}}{{list.address}}</div>
          </div>
        </van-pull-refresh>
        <div class="blank"
             v-if="datas.length<=0">
          <img src="../../assets/images/blank.png">
          <p>该地区暂无记录，<em style="color: #F15353;" @click.stop="searchAll">点击搜索全部</em></p>
        </div>
      </div>
    </div>
    <div class="mask"
         v-show="status">
    </div>
  </div>
</template>

<script>
import sort_controller from './sort_controller';
export default sort_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#sort-activity {
  .content {

    .search_box {
      position: relative;
      z-index: 99999;
      padding-bottom: 0.8rem;
      background: white;

      .search {
        height: 2.75rem;
        line-height: 2.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.875rem;
        background-color: #fff;

        .text {
          font-size: 14px;
          color: #1c96fe;
        }

        .left {
          font-size: 15px;
          display: flex;

          // i {
          //   color: #999;
          //   font-size: 1rem;
          // }

          span {
            display: block;
            margin-left: 0.25rem;
            max-width: 6rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #333333;
            font-weight: 500;
          }

          i:last-child {
            font-size: 0.8rem;
            color: #333333;
          }
        }

        .right {
          width: 65%;
          height: 1.875rem;
          background: #f5f5f5;
          display: flex;
          line-height: 1.875rem;
          border-radius: 1rem;
          padding: 0 0.625rem;
          font-size: 14px;

          i {
            font-size: 1rem;
            color: #999;
            margin-right: 0.2rem;
          }

          input {
            border: none;
            width: 100%;
          }
        }
      }

      input {
        margin-left: 0;
      }
    }

    .tab_box {
      background: #fff;
      position: relative;
      z-index: 99999;

      .tab_list {
        // height: 44px;
        // line-height: 44px;
        border-bottom: solid 1px #F5F5F5;
        overflow-y: hidden;
        transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        transition-duration: 300ms;
        font-size: 18px;
        padding-bottom: 0.6rem;
        padding-right: 3rem;
        padding-left: 0.5rem;
      }

      .opactiy {
        background: white;
        z-index: 99;
        position: absolute;
        bottom: 0.35rem;
        right: 0;
        width: 3.2rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        // .iconfont {
          // font-size: 24px;
          // color: #333;
        // }
        .box-show {
          height: 103%;
          width: 1rem;
          box-shadow: -6px 0 10px -5px rgba(170, 170, 179, 0.5);
          position: absolute;
          left: 0;
          bottom: -0.2rem;
        }
      }
    }

    .sort-list {
      position: relative;
      margin-bottom: 1rem;
      .pop {
        padding: 0.5rem 1rem 1.4rem 1rem;
        background: #fff;
        position: absolute;
        width: 100%;
        top: 0;
        z-index: 9999;

        ul {
          display: flex;
          flex-wrap: wrap;

          .item {
            margin-top: 0.6rem;
            display: flex;
            align-items: center;
            margin-right: 0.8rem;
            justify-content: center;
            min-width: 4rem;
            padding: 0 0.5rem;
            height: 2rem;
            background: #F0F0F1;
            color: #00001C;
            border-radius: 0.5rem;
          }

          li:nth-child(4n) {
            margin-right: 0;
          }
        }
      }

      .calssify-list:last-child {
        margin-bottom: 0;
      }

      .calssify-list {
        padding: 0.7rem;
        margin: 0.75rem;
        background: white;
        border-radius: 0.5rem;

        .address {
          font-size: 0.75rem;
          font-weight: 400;
          color: #6E6E79;
          margin-top: 0.7rem;
          text-align: left;
          display: flex;
          align-items: center;

          .iconfont {
            margin-right: 0.3rem;
          }
        }

        .calssify-list-row {
          display: flex;
          border-bottom: 0.1rem dashed #D6D6DC;
          padding-bottom: 0.85rem;
        }

        .list-image {
          width: 8.9375rem;
          height: 5.5938rem;
          position: relative;

          .left {
            width: 100%;
            height: 100%;
            border-radius: 0.5rem;
          }

          .text {
            position: absolute;
            left: 0;
            top: 0;
            width: 3rem;
            height: 1.3rem;
            border-radius: 0.5rem 0 0.5rem 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            line-height: 1.3rem;
          }
        }

        .list-info {
          display: flex;
          flex-direction: column;
          margin-left: 0.7rem;
          align-items: baseline;
          flex: 1;
          justify-content: space-between;

          // p {
          //   font-size: 14px;
          //   text-align: left;
          //   margin-top: 5px;
          //   display: flex;
          // }

          .title {
            font-size: 0.85rem;
            font-weight: bold;
            color: #00001C;
            margin-top: 0.15rem;
          }

          .clock {
            font-size: 0.75rem;
            font-weight: 400;
            color: #00001C;
            margin-bottom: 0.15rem;
          }

          p:first-child {
            margin-top: 0;
            display: -webkit-box;
            overflow: hidden;
            white-space: normal;
            text-overflow: ellipsis;
            word-wrap: break-word;
            -webkit-line-clamp: 2;

            /* autoprefixer: off */
            -webkit-box-orient: vertical;
          }

          .bottom-status {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            font-size: 0.95rem;
            font-weight: bold;
            color: #F15353;
          }
        }
      }

      .blank {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        img {
          width: 6rem;
          height: 6rem;
        }

        span {
          margin-top: 15px;
          color: #ccc;
          font-size: 14px;
        }
      }
    }
  }

  .mask {
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    z-index: 888;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
  }

  .padding {
    // padding: 1rem 0;
  }

  .green {
    background-color: rgba(59, 179, 93, 0.2);
    color: #3bb35d;
  }

  .yellow {
    background-color: rgba(255, 177, 38, 0.2);
    color: #ffb126;
  }

  .red {
    background-color: rgba(255, 49, 38, 0.2);
    color: #ff3126;
  }

  .spaceAround {
    justify-content: space-around !important;

    .all-width {
      width: 100% !important;
    }
  }

  .default {
    background-color: rgba(59, 179, 93, 0.8);
    color: #fff;
  }

  .default-end {
    background-color: rgb(0, 0, 0, 0.5);
    color: #fff;
  }

  .default-wait {
    background: rgba(249, 109, 32, 0.7);
    color: #fff;
  }
}
</style>
